<template>
  <div class="comment-reply">
    <van-nav-bar :title="`${comment.reply_count}条回复`">
      <van-icon @click="$emit('close')" slot="left" name="cross" />
    </van-nav-bar>

    <CommentItem :comment="comment" :inReply="true" />

    <CommentList type="c" :source="comment.com_id" :inReply="true" />

    <van-button @click="onReplyComment">回复</van-button>

    <van-popup v-model="showPost" position="bottom">
      <PostComment
        :target="comment.com_id"
        :articleId="articleId"
        :inReply="true"
        :comment="comment"
      />
    </van-popup>
  </div>
</template>

<script>
import CommentItem from "./comment-item";
import CommentList from "./comment-list";
import PostComment from "./post-comment.vue";

export default {
  name: "CommentReply",
  components: {
    CommentItem,
    CommentList,
    PostComment,
  },
  props: ["comment", "articleId"],
  data() {
    return {
      showPost: true,
    };
  },
  methods: {
    onReplyComment() {
      this.showPost = true;
    },
  },
  mounted() {
    // 回复评论成功事件
    this.$bus.$on("reply-success", () => {
      this.showPost = false;
    });
  },
};
</script>

<style scoped lang="less">
.comment-reply {
  padding: 0 18px 0 14px;

  /deep/.van-nav-bar__left {
    padding-left: 2px;
  }

  .comment-item {
    padding-top: 0;

    /deep/.liking-wrap {
      top: 0;
    }
  }

  .van-button {
    position: absolute;
    width: 100%;
    right: 0;
    bottom: 0;
  }
}
</style>
